<!-- @author:  ******   @date:   ****** -->
<template>
     <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页 </el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/competition' }">赛事管理 </el-breadcrumb-item>
                <el-breadcrumb-item> 赛事详情 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form  label-width="100px">
                <el-form-item label="赛事名称">
                  <span>{{result.matchName}}</span>
                </el-form-item>
                <el-form-item label="赛事标题">
                  <span>{{result.matchTitle}}</span>
                </el-form-item>
                <el-form-item label="比赛场次">
                  <span>{{result.palyNum}}</span>
                </el-form-item>
                <el-form-item label="报名费用">
                  <span>{{result.signFee}}</span>
                </el-form-item>
                <el-form-item label="总奖金">
                  <span>{{result.bonusAmount}}</span>
                </el-form-item>
                <el-form-item label="报名开始时间">
                  <span>{{result.signStartTime}}</span>
                </el-form-item>
                <el-form-item label="报名结束时间">
                  <span>{{result.signEndTime}}</span>
                </el-form-item>
                <el-form-item label="比赛开始时间">
                  <span>{{result.matchStartTime}}</span>
                </el-form-item>
                <el-form-item label="比赛结束时间">
                   <span>{{result.matchEndTime}}</span>
                </el-form-item>
                <el-form-item label="排名规则">
                    <span>{{result.rankSort.fristRule}}</span>
                    <span>{{result.rankSort.secondRule}}</span>
                    <span>{{result.rankSort.thirdRule}}</span>
                    <span>{{result.rankSort.fourthRule}}</span>
                </el-form-item>
                <el-form-item label="赛事规则">
                  <span>比赛类型:</span>
                  <!-- (1,匹配赛，2人机，4排位，5灵活组排，6大乱斗，7匹配3v3,8自定义) , -->
                  <span v-if="result.gameType==1">匹配赛</span>
                  <span v-else-if="result.gameType == 2">人机</span>
                  <span v-else-if="result.gameType == 4">排位</span>
                  <span v-else-if="result.gameType == 5">灵活组排</span>
                  <span v-else-if="result.gameType == 6">大乱斗</span>
                  <span v-else-if="result.gameType == 7">匹配3v3</span>
                  <span v-else-if="result.gameType == 8">自定义</span>
                  <span>地图类型:{{result.battleMap == 1?'召唤师峡谷':''}}</span>
                </el-form-item>
            </el-form>
             <el-form  label-width="100px">
                <el-form-item label="比赛规则描述">
                    <span v-html="result.matchRuleText"></span>
                </el-form-item>
                <el-form-item label="奖励规则">
                    <el-form-item :label="item.text" v-for="(item,index) in result.mustRewards" :key="index">
                        <span>{{item.rewardValue}}</span>
                        <span v-if="item.rewardType == 1">元</span>
                        <span v-else-if="item.rewardType == 2">积分</span>
                    </el-form-item>
                    <!-- 继续新增排名 -->
                     <div class="" v-for="(item) in result.matchRewardDTO.otherRankRewards" :key="item.endRanking" style="margin:20px 0;">
                         <span>第</span>
                          <span>{{item.endRanking }}</span>
                        <span>名</span>
                        <span>-</span>
                        <span>第</span>
                          <span>{{item.startRanking}}</span>
                        <span>名</span>
                        <span>奖励</span>
                        <span>{{item.rewardValue}}</span>
                        <span>{{item.rewardType == 1?'元':'积分'}}</span>
                    </div>
                    <!-- 排名幸运数字 -->
                        <div  v-for="(item) in result.matchRewardDTO.luckyRewards" :key="item.rewardValue" style="margin:20px 0;">
                            <span>幸运数字{{item.luckyNums}}</span>
                            <span>奖励</span>
                            <span>{{item.rewardValue}}</span>
                            <span>{{item.rewardType == 1?'元':'积分'}}</span>
                        </div>
                </el-form-item>
                <el-form-item label="奖励规则描述">
                    <span v-html="result.matchRewardText"></span>
                </el-form-item>
                <el-form-item label="头像">
                  <div class="comment-text">
                        <div class="matchSmallImage">
                          <img :src="result.matchSmallImage" >
                        </div> 
                  </div>
                </el-form-item>
                <el-form-item label='背景图'>
                  <div class="comment-text">
                      <div class="matchBackImage">
                          <img :src="result.matchBackImage"  style="">
                      </div>
                  </div>
                </el-form-item>
             </el-form>   
           
        </div>
     </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      matchId: "",
      result: {
        rankSort: {
          fristRule: "",
          secondRule: "",
          thirdRule: "",
          fourthRule: ""
        },
        matchRewardDTO: {
          otherRankRewards: [],
          luckyRewards: []
        }
      }
    };
  },
  mounted() {
    this.matchId = this.$route.query.matchId;
    this.initData();
  },

  methods: {
    //初始化
    async initData() {
      let res = await this.$get({
        url: this.fn.chatApi + "/admin/match/getMatchDetail",
        data: {
          macthId: this.matchId
        }
      });
      if (res.code == 111111) {
        this.result = res.data;
        this.result.mustRewards.forEach((e, i) => {
          if (e.ranKing == 1) {
            e.text = "冠军奖励";
          } else if (e.ranKing == 2) {
            e.text = "亚军奖励";
          } else if (e.ranKing == 3) {
            e.text = "季军奖励";
          }
        });
        let array = Object.keys(this.result.rankSort);
        array.forEach(element => {
          this.changeRule(this.result.rankSort[element], element);
        });
      }
    },
    changeRule(data, index) {
      switch (data) {
        case 10:
          this.result.rankSort[index] = "斩杀";
          break;
        case 20:
          this.result.rankSort[index] = "助攻";
          break;
        case 30:
          this.result.rankSort[index] = "死亡";
          break;
        case 40:
          this.result.rankSort[index] = "KDA";
          break;
        case 50:
          this.result.rankSort[data] = "比赛时长";
          break;
        default:
          break;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@function px2rem($px) {
  @return $px/100 * 1rem;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 220px;
}
.el-select {
  width: 100px;
}
.el-form {
  width: 512px;
}

.el-input__inner {
  -webkit-appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: none;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}

.el-input__inner:hover {
  border-color: #e9e9e9;
}

.el-input__inner:focus {
  border-color: #42a5f5;
  box-shadow: none;
  transition-duration: 0.5s;
}

.el-input__inner::-webkit-input-placeholder {
  line-height: 20px;
}

.el-input__inner,
.el-checkbox__inner,
.el-textarea__inner,
.el-button {
  border-radius: 0;
}
.editer .ql-container {
  min-height: 200px;
}

.comment-text {
  .matchSmallImage {
    width: 200px;
    height: 200px;
    img {
      width: 100%;
    }
  }
  .matchBackImage {
    width: 300px;
    height: 300px;
    img {
      width: 100%;
    }
  }
}
</style>